/**
 * @param {string} shapeType 支持 rect/circel/path 等内置节点
 * @param {string} getShapeStyle 用于覆盖 base-node 默认样式
 * @param {string} icon 图片 url
 * @param {string} labelCfg 文本节点样式
 */
import defaultStyles from './defaultStyles'
import G6 from '@antv/g6'

const {
  iconStyles,
  nodeStyles,
  anchorPointStyles,
  nodeLabelStyles
} = defaultStyles

function getStyle (options, cfg) {
  return {
    ...cfg,
    // 自定义默认样式
    ...nodeStyles,
    ...options,
    // 当前节点样式
    ...cfg.style,
    // 文本配置
    labelCfg: {
      ...nodeLabelStyles,
      ...cfg.labelCfg
    },
    // 图标样式
    iconStyles: {
      ...iconStyles,
      ...cfg.iconStyles
    },
    // 锚点样式
    anchorPointStyles: {
      ...anchorPointStyles,
      ...cfg.anchorPointStyles
    },
    ...cfg.nodeStateStyles,
    // 锚点高亮样式
    anchorHotsoptStyles: cfg.anchorHotsoptStyles
  }
}

export default G6 => {
  // 从 base-node 中扩展方形节点
  G6.registerNode('rect-node', {
    afterDraw(cfg, group) {
      this._drawAnchor(cfg, group)
    },

    _drawAnchor(cfg, group) {
      const size = cfg.size
      const width = size[0]
      const height = size[1]

      group.addShape('circle', {
        attrs: {
          x: 0 - width / 2,
          y: 0 + height / 4,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0, 0.75],
          _pointIndex: 0
        },
        name: 'anchor-0' // left bottom
      })
      group.addShape('circle', {
        attrs: {
          x: 0 - width / 2,
          y: 0 - height / 4,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0, 0.25],
          _pointIndex: 1
        },
        name: 'anchor-1' // left top
      })

      group.addShape('circle', {
        attrs: {
          x: 0 - width / 6,
          y: 0 - height / 2,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0.33, 0],
          _pointIndex: 2
        },
        name: 'anchor-2' // top left
      })

      group.addShape('circle', {
        attrs: {
          x: 0 + width / 6,
          y: 0 - height / 2,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0.66, 0],
          _pointIndex: 3
        },
        name: 'anchor-3' // top rignt
      })

      group.addShape('circle', {
        attrs: {
          x: 0 + width / 2,
          y: 0 - height / 4,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [1, 0.25],
          _pointIndex: 4
        },
        name: 'anchor-4' // right top
      })

      group.addShape('circle', {
        attrs: {
          x: 0 + width / 2,
          y: 0 + height / 4,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [1, 0.75],
          _pointIndex: 5
        },
        name: 'anchor-5' // right bottom
      })

      group.addShape('circle', {
        attrs: {
          x: 0 + width / 6,
          y: 0 + height / 2,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0.66, 1],
          _pointIndex: 6
        },
        name: 'anchor-6' // bottom right
      })

      group.addShape('circle', {
        attrs: {
          x: 0 - width / 6,
          y: 0 + height / 2,
          r: 5,
          fill: '#fff',
          stroke: '#5b8ff9',
          opacity: 0,
          _point: [0.33, 1],
          _pointIndex: 7
        },
        name: 'anchor-7'
      })
    },

    getAnchorPoints() {
      return [
        [0, 0.75],
        [0, 0.25],
        [0.33, 0],
        [0.66, 0],
        [1, 0.25],
        [1, 0.75],
        [0.66, 1],
        [0.33, 1]
      ]
    },

    shapeType: 'rect',
    // 当前节点的样式集合
    getShapeStyle (cfg) {
      const width = cfg.style.width || 160
      const height = cfg.style.height || 50

      return getStyle.call(this, {
        width,
        height,
        radius: 5,
        // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
        x: -width / 2,
        y: -height / 2
      }, cfg)
    }
  }, 'base-node')
}
